<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>Canvas 画图</title>
    <script src="js/zepto-1.1.4.min.js" type="text/javascript"></script>
    <script src="js/cheapy_chart.js" type="text/javascript"></script>
</head>
<body>
    <div id="container" style="position: relative;height: 300px; width: 400px;"></div>
    <script type="text/javascript">
        $(function(){
            var chart = new CheapyChart({
                el: "#container",
                animation: {
                    enable: true,
                    timeout: 2000
                },
                title: {
                    name: "Cheapy"
                },
                legend: {
                    show: true
                },
                tooltip: {
                    show: true,
                    formatter: function(arr){
                        var html = [], item , i, type;
                        for(i= 0; i < arr.length; i++){
                            item = arr[i];
                            if(item){
                                type = item.type;
                                if(type === "kline"){
                                    html.push('<div class="gp-pos-v2">');
                                    html.push('<i></i>');
                                    html.push('<div class="p1"><span>开盘：', item.value[0] ,'</span></div>');
                                    html.push('<div class="p1"><span>收盘：', item.value[1] ,'</span></div>');
                                    html.push('<div class="p2">', item.name ,'</div>');
                                    html.push('</div>');
                                }
                            }
                        }
                        return html.join("");
                    },
                    position: function(arr){
                        return [arr[0], 400];
                    }
                },
                yAxis: {
                    boundaryGap: [.05, 0.05],
                    splitLine: {
                        show: 1
                    }
                },
                xAxis: {
                    boundaryGap: [.05,.05],
                    splitLine: {
                        show: false,
                        count: 9,
                        itemStyle: {
                            type: "dot"
                        }
                    },
                    axisLabel: {

                    },
                    axisLine: {
                        show: true
                    },
                    data: [
                        "1", "3", "3", "4", "5", "6", "7", "8", "9","1", "3", "3", "4", "5", "6", "7", "8", "9","1", "3", "3", "4", "5", "6", "7", "8", "9","1", "3", "3", "4", "5", "6", "7", "8", "9"
                    ]
                },
                series : [{
                    show: true,
                    type: "line",
                    name: "myLine",
                    data: [1, 3, 2, 4, 3, 6, 0, 9, 7],
                    lineStyle: {
                        color: "red"
                    }
                },{
                    show: false,
                    type: "kline",
                    name: "myKLine",
                    data: [
                        [2320.26,2302.6,2287.3,2362.94],
                        [2300,2291.3,2288.26,2308.38],
                        [2295.35,2346.5,2295.35,2346.92],
                        [2347.22,2358.98,2337.35,2363.8],
                        [2360.75,2382.48,2347.89,2383.76],
                        [2383.43,2385.42,2371.23,2391.82],
                        [2377.41,2419.02,2369.57,2421.15],
                        [2425.92,2428.15,2417.58,2440.38],
                        [2411,2433.13,2403.3,2437.42],
                        [2320.26,2302.6,2287.3,2362.94],
                        [2300,2291.3,2288.26,2308.38],
                        [2295.35,2346.5,2295.35,2346.92],
                        [2347.22,2358.98,2337.35,2363.8],
                        [2360.75,2382.48,2347.89,2383.76],
                        [2383.43,2385.42,2371.23,2391.82],
                        [2377.41,2419.02,2369.57,2421.15],
                        [2425.92,2428.15,2417.58,2440.38],
                        [2411,2433.13,2403.3,2437.42],
                        [2320.26,2302.6,2287.3,2362.94],
                        [2300,2291.3,2288.26,2308.38],
                        [2295.35,2346.5,2295.35,2346.92],
                        [2347.22,2358.98,2337.35,2363.8],
                        [2360.75,2382.48,2347.89,2383.76],
                        [2383.43,2385.42,2371.23,2391.82],
                        [2377.41,2419.02,2369.57,2421.15],
                        [2425.92,2428.15,2417.58,2440.38],
                        [2411,2433.13,2403.3,2437.42],
                        [2320.26,2302.6,2287.3,2362.94],
                        [2300,2291.3,2288.26,2308.38],
                        [2295.35,2346.5,2295.35,2346.92],
                        [2347.22,2358.98,2337.35,2363.8],
                        [2360.75,2382.48,2347.89,2383.76],
                        [2383.43,2385.42,2371.23,2391.82],
                        [2377.41,2419.02,2369.57,2421.15],
                        [2425.92,2428.15,2417.58,2440.38],
                        [2411,2433.13,2403.3,2437.42]
                    ],
                    upColor: "",
                    downColor: "",
                    markLine: [{
                        type: "value",
                        value: 2300,
                        lineStyle: {
                            width: 2,
                            type: "dot",
                            color: "black"
                        },
                        textStyle: {
                            position: "outside",
                            size: 8,
                            weight: "bold",
                            color: "red"
                        }
                    }]
                }, {
                    show: true,
                    type: "bar",
                    name: "myBar2",
                    data: [1, 2, 0, 4, 5, 0, 7, 8, 0],
                    lineStyle: {
                        color: "#F28888"
                    }
                }, {
                    show: false,
                    type: "bar",
                    name: "myBar1",
                    data: [0, 0, -3.5, 0, 0, -5, 0, 0, -9],
                    lineStyle: {
                        color: "#AED244"
                    }
                }]
            });
            chart.render();
        });
    </script>
</body>
</html>